<template>
  <div class="framework">
    <!--    <p class="mark">framwork:子应用的界面</p>-->
    <div v-html="htmlContent" />
    <!--    <div ref="appContent"></div>-->
  </div>
</template>

<script lang="ts">
import { Watch, Vue } from 'vue-property-decorator'
import Component from 'vue-class-component'
import RegApp, { AppMap } from '@/plugins/registerMicroApps/regApp'
import { Route } from 'vue-router'
import { ITagView, TagsViewModule } from '@/store/modules/tags-view'
// import { VueConstructor } from 'vue'
Component.registerHooks([
  'beforeRouteEnter',
  'beforeRouteUpdate',
  'beforeRouteLeave'
])

@Component
export default class Framework extends Vue {
  // vue data
  htmlContent: string = this.regApp.lastContent
  appMap: AppMap = this.regApp.appMap

  // curInstance: Vue = this.regApp.curAppInstance

  @Watch('$route', { immediate: true })
  private changeRouter(route: Route) {

  }

  get regApp() {
    return this.$regApp
  }

  get curInstance() {
    return this.regApp.curAppInstance
  }

  private changeTitle(app: Vue) {
    // debugger
    const item = TagsViewModule.visitedViews.find(item => {
      return item.path === app.$route.path
    })
    if (item) {
      if ((item.meta.title || '').trim() === '') {
        TagsViewModule.setTagViewMeta(app.$route)
      }
    }
  }

  created() {
    this.appMap = this.regApp.appMap
    // this.curInstance = this.regApp.curAppInstance
  }

  mounted() {
    // 子项目绘制重构
    this.regApp.renderApp((html: string) => {
      // console.log('html渲染')
      this.htmlContent = html
    })
    this.regApp.renderAfterMount((app, props) => {
      // console.log(`${props.name}子项目挂载 ->`, app)
      // console.log(`${props.name}挂载时 ->`, this.regApp.appMap)
      setTimeout(() => {
        // console.log('子组件挂载结束 ->', app.$route)
        if (app.$route.meta.title) {
          // 当子项目读取后，tag标签名称变更
          this.changeTitle(app)
        }
      }, 500)
    })
    this.regApp.renderAfterUnMount((app, props) => {
      console.log(`${props.name}子项目卸载 ->`, app)
    })
    this.regApp.firstMounted(() => {
      console.log('首次挂载完成')
    })
    // this.regApp.startApp()
  }
}
</script>
